2c:null 2d:["$","title",null,{"children":"konisiki | kominami | Observable"}] 32:T1818, { let canvas = d3.create("div").node(); let bunnyTexture = new PIXI.Texture.from("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAlCAYAAABcZvm2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWNJREFUeNrsV8sNwjAMbUqBBWACxB2pQ8AKcGALTsAJuDEFB1gBhuDAuWICmICPQh01pXWdJqEFcaglRGRbfonjPLuMc+5QwhjLGEJfZusjxZOL9akZKye9G98vPMfvsAx4qBfKwfzBL9s6uUHpI6U/u7+BKGkNb/H6umtk7MczF0HyfKS4zo/k/4AgTV8DOizrqX8oECgC+MGa8lGJp9sJDiAB8nyqYoglvJOPbP97IqoATGxWVZeXJlMQwYHA3piF8wJIblOVNBBxe3TPMLoHIKtxrbS7AAbBrA4Y5NaPAXf8LjN6wKZ0RaZOnlAFZnuXInVR4FTE6eYp0olPhhshtXsAwY3PquoAJNkIY33U7HTs7hYBwV24ItUKqDwgKF3VzAZ6k8HF+B1BMF8xRJbeJoqMXHZAAQ1kwoluURCdzepEugGEImBrIADB7I4lyfbJLlw92FKE6b5hVd+ktv4vAQYASMWxvlAAvcsAAAAASUVORK5CYII="); /* p5.jsで動いた。 let bunnyTexture = new PIXI.Texture.from('https://pixijs.io/examples/examples/assets/bunny.png'); */ let pressingKeyArray = []; let enemyBurretObjArr = []; let playerBurretObjArr = []; let tracker; class Burret{ constructor(burretSpr, run) { this.burretSpr = burretSpr; this.burretSpr.interactive = true; this.burretSpr.rnd = Math.random(); app.stage.addChild(this.burretSpr); this.run = run; } run() { }; } class EnemyBurret extends Burret { constructor(burretSpr, run) { burretSpr.name = "EnemyBurret"; super(burretSpr, run); } } class PlayerBurret extends Burret { constructor(burretSpr, run) { burretSpr.name = "PlayerBurret"; super(burretSpr, run); } } document.body.addEventListener('keydown', ev => { pressingKeyArray.push(ev.key); pressingKeyArray = Array.from(new Set(pressingKeyArray)); }); document.body.addEventListener('keyup', ev => { pressingKeyArray = pressingKeyArray.filter(akey => akey !== ev.key); }); let app = new PIXI.Application({ width: 600, height: 600, backgroundColor: '0x' + '#1099bb'.slice(1), }); let lifeBar = new PIXI.Graphics().beginFill('0x' + '#bb1010'.slice(1)) .drawRect(50, 580, 500, 10) .endFill(); app.stage.addChild(lifeBar); app.stage.sortableChildren = true; let el = canvas; let bunnySprite = new PIXI.Sprite(bunnyTexture); bunnySprite.name = "プレイヤー"; bunnySprite.anchor.set(0.5); bunnySprite.x = 300; bunnySprite.y = 500; bunnySprite.life = 100; app.stage.addChild(bunnySprite); let enemyBunnySprite = new PIXI.Sprite(bunnyTexture); enemyBunnySprite.y = 20; enemyBunnySprite.zIndex = 100; enemyBunnySprite.anchor.set(0.5); enemyBunnySprite.name = "敵"; enemyBunnySprite.life = 255; enemyBunnySprite.tint = 0xffffff; app.stage.addChild(enemyBunnySprite); let facePositions; let moveDir = 0; let speed = 0; let randomadd = 0; app.ticker.add((delta) => { bunnySprite.rotation += 0.1; enemyBunnySprite.x += 1; if (enemyBunnySprite.x > app.renderer.screen.width) { enemyBunnySprite.x = 0; } randomadd += Math.random(); if(randomadd>5){ enemyBurretObjArr.push(new EnemyBurret(new PIXI.Graphics().beginFill('0x' + '#bb1010'.slice(1)) .drawEllipse(enemyBunnySprite.x, enemyBunnySprite.y + 20, 12, 12) .beginFill('0x' + '#1099bb'.slice(1)) .drawEllipse(enemyBunnySprite.x, enemyBunnySprite.y + 20, 10, 10) .endFill(), (sp) => { sp.y += 3; sp.x += (sp.rnd - 0.5) * 5; if (sp.y > app.renderer.screen.height) { app.stage.removeChild(sp); return false; } return true; })); randomadd = 0; } playerBurretObjArr.push(new PlayerBurret(new PIXI.Graphics().beginFill('0x' + '#2abb10'.slice(1)) .drawEllipse(0, 0, 3, 3) .beginFill('0x' + '#1099bb'.slice(1)) .drawEllipse(0, 0, 2, 2) .endFill() .setTransform(bunnySprite.x, bunnySprite.y + 3, 1, 1, 0, 0, 0, 1.5, 1.5), (sp) => { sp.y -= 8; sp.x += (sp.rnd - 0.5)*2.0; if (sp.y < 0) { app.stage.removeChild(sp); return false; } return true; })); enemyBurretObjArr = enemyBurretObjArr.filter(e => e.run(e.burretSpr)); playerBurretObjArr = playerBurretObjArr.filter(e => e.run(e.burretSpr)); let hitObject = app.renderer.plugins.interaction.hitTest(bunnySprite.getGlobalPosition()); if (hitObject && hitObject.name === "EnemyBurret") { bunnySprite.life -= 1; lifeBar.width = bunnySprite.life*5; if(bunnySprite.life<0){ app.ticker.stop(); canvas.innerHTML = '' } } let hitObjectEnem = app.renderer.plugins.interaction.hitTest(enemyBunnySprite.getGlobalPosition()); if (hitObjectEnem && hitObjectEnem.name === "PlayerBurret") { console.log(hitObjectEnem.name); enemyBunnySprite.life -= 5; enemyBunnySprite.tint = '0x' + ('#ff' + enemyBunnySprite.life.toString(16)+ enemyBunnySprite.life.toString(16)).slice(1); if(enemyBunnySprite.life<0){ app.ticker.stop(); canvas.innerHTML = '

クリアー

' } } for (let key of pressingKeyArray) { switch (key) { case 'ArrowUp': bunnySprite.y -= 5.0; break; case 'ArrowDown': bunnySprite.y += 5.0; break; case 'ArrowRight': bunnySprite.x += 5.0; break; case 'ArrowLeft': bunnySprite.x -= 5.0; break; } } bunnySprite.x += 20.0*moveDir*speed; bunnySprite.x = bunnySprite.x<0?0:bunnySprite.x; bunnySprite.x = bunnySprite.x>app.renderer.screen.width?app.renderer.screen.width:bunnySprite.x; }); canvas.appendChild(app.view); return canvas; }33:T507,{ const canvas = d3.create("canvas").node(); function init() { const width = 960; const height = 540; // レンダラーを作成 // レンダラーを作成 const renderer = new THREE.WebGLRenderer({ canvas: canvas }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); // シーンを作成 const scene = new THREE.Scene(); // カメラを作成 const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 10000 ); camera.position.set(0, 0, +1000); // 箱を作成 const geometry = new THREE.BoxGeometry(500, 500, 500); const material = new THREE.MeshStandardMaterial({ color: 0x0000ff }); const box = new THREE.Mesh(geometry, material); scene.add(box); // 平行光源 const directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set(1, 1, 1); // シーンに追加 scene.add(directionalLight); tick(); function tick() { requestAnimationFrame(tick); // 箱を回転させる box.rotation.x += 0.01; box.rotation.y += 0.01; // レンダリング renderer.render(scene, camera); } } init(); return canvas }34:[] 30:{"id":"097c03e17e2e3ff3","slug":"konisiki","title":"konisiki","thumbnail":"09893aaeeb8f3686a79f84c3771ce0ac231b8a5c92520504fb07ccef8cc2675e","access_level":"public","create_time":"$D2020-10-09T09:46:17.938Z","update_time":"$D2020-11-13T08:14:10.683Z","view_time":null,"first_public_time":"$D2020-11-06T06:51:31.819Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c276f82f5bb5a0e9","login":"kominamiyuto","name":"kominami","avatar_url":"https://avatars-next.observableusercontent.com/1ac782347f415c947a22818ac2cf8c73a0804bcfbc4168980c82ca6a2b2cb551","tier":"starter_2024"},"version":369,"publish_version":369,"role":null,"authored":false,"authors":[{"type":"individual","id":"d9c4d2f39919a8bb","login":"kominamiyuto","name":"kominami","avatar_url":"https://avatars-next.observableusercontent.com/1ac782347f415c947a22818ac2cf8c73a0804bcfbc4168980c82ca6a2b2cb551","tier":null}],"members":[{"type":"individual","id":"d9c4d2f39919a8bb","login":"kominamiyuto","name":"kominami","avatar_url":"https://avatars-next.observableusercontent.com/1ac782347f415c947a22818ac2cf8c73a0804bcfbc4168980c82ca6a2b2cb551","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"konisiki","cells":[{"id":0,"value":"md`# konisiki`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"{\n let app = (e) => {\n return e*10;\n };\n return app(20);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"rotus = 10;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"rotus","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"sampleObj = ({\n key1: 1,\n key2: 10\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"sampleObj.key1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"d3 = require(\"d3@6\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"THREE = require(\"three\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"PIXI = require('pixi.js@5.3.3/dist/pixi.min.js').catch(async () => {\n window.PIXI.Cull = (await require('https://bundle.run/@pixi-essentials/cull@1.0.5/dist/cull.js')).PIXI.Cull;\n return window.PIXI;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"{\n const elem = html`

`;\n ReactDOM.render(htm`<${App} page=\"すべて\" />`, elem);\n return elem;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"class App extends React.Component {\n constructor(props) {\n super(props);\n this.state = { todos: [] };\n }\n addTodo() {\n const { todos = [] } = this.state;\n this.setState({ todos: todos.concat(`アイテム ${todos.length}`) });\n }\n render() {\n const { todos } = this.state;\n const { page } = this.props;\n return htm`\n

\n <${Header} name=\"ToDo (${page})\" />\n

${todo}

\n \n <${Footer}>フッターがここにはいるよ\n

\n `;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"htm = import('https://unpkg.com/htm@3?module').then(r => r.default.bind(React.createElement))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"Header = ({ name }) => htm`

${name} リスト

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"Footer = props => htm`