戰鬥遊戲 | 程式專案 | 橘蘋學習平台

{"id":786172,"student_id":58026,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\r\\n\u003chtml\u003e\\r\\n\u003chead\u003e\\r\\n    \u003ctitle\u003e終極戰士：武器對決\u003c/title\u003e\\r\\n    \u003cstyle\u003e\\r\\n        canvas {\\r\\n            background: #ffffff;\\r\\n            display: block;\\r\\n            margin: 0 auto;\\r\\n        }\\r\\n    \u003c/style\u003e\\r\\n\u003c/head\u003e\\r\\n\u003cbody\u003e\\r\\n    \u003ccanvas id=\\\"gameCanvas\\\" width=\\\"800\\\" height=\\\"600\\\"\u003e\u003c/canvas\u003e\\r\\n    \u003cscript src=\\\"game.js\\\"\u003e\u003c/script\u003e\\r\\n\u003c/body\u003e\\r\\n\u003c/html\u003e\\r\\n\",\"css\":\"/* 設定整個頁面內容水平置中、內寬為 30 像素：*/\\nbody {\\n    text-align: center;\\n    padding: 30px;\\n}\\n\\n/* 設定圖片的寬度為銀幕一半寬 */\\nimg {    \\n    max-width: 50%; \\n}\\n\\n/* 設定文字的顏色為淡黑色 */\\np {\\n    color: #555555;\\n}\",\"js\":\"const canvas = document.getElementById('gameCanvas');\\r\\nconst ctx = canvas.getContext('2d');\\r\\n\\r\\nconst screenWidth = canvas.width;\\r\\nconst screenHeight = canvas.height;\\r\\n\\r\\nclass Player {\\r\\n    constructor() {\\r\\n        this.width = 50;\\r\\n        this.height = 50;\\r\\n        this.x = screenWidth / 2 - this.width / 2;\\r\\n        this.y = screenHeight / 2 - this.height / 2;\\r\\n        this.speed = 5;\\r\\n        this.color = 'blue';\\r\\n    }\\r\\n\\r\\n    draw() {\\r\\n        ctx.fillStyle = this.color;\\r\\n        ctx.fillRect(this.x, this.y, this.width, this.height);\\r\\n    }\\r\\n\\r\\n    move(direction) {\\r\\n        if (direction === 'left' \u0026\u0026 this.x \u003e 0) this.x -= this.speed;\\r\\n        if (direction === 'right' \u0026\u0026 this.x \u003c screenWidth - this.width) this.x += this.speed;\\r\\n        if (direction === 'up' \u0026\u0026 this.y \u003e 0) this.y -= this.speed;\\r\\n        if (direction === 'down' \u0026\u0026 this.y \u003c screenHeight - this.height) this.y += this.speed;\\r\\n    }\\r\\n}\\r\\n\\r\\nclass Weapon {\\r\\n    constructor(x, y) {\\r\\n        this.width = 20;\\r\\n        this.height = 20;\\r\\n        this.x = x;\\r\\n        this.y = y;\\r\\n        this.speed = 7;\\r\\n        this.color = 'red';\\r\\n    }\\r\\n\\r\\n    draw() {\\r\\n        ctx.fillStyle = this.color;\\r\\n        ctx.fillRect(this.x, this.y, this.width, this.height);\\r\\n    }\\r\\n\\r\\n    update() {\\r\\n        this.x += this.speed;\\r\\n    }\\r\\n}\\r\\n\\r\\nclass Enemy {\\r\\n    constructor(x, y) {\\r\\n        this.width = 50;\\r\\n        this.height = 50;\\r\\n        this.x = x;\\r\\n        this.y = y;\\r\\n        this.speed = 3;\\r\\n        this.color = 'green';\\r\\n    }\\r\\n\\r\\n    draw() {\\r\\n        ctx.fillStyle = this.color;\\r\\n        ctx.fillRect(this.x, this.y, this.width, this.height);\\r\\n    }\\r\\n\\r\\n    update() {\\r\\n        this.x -= this.speed;\\r\\n    }\\r\\n}\\r\\n\\r\\nconst player = new Player();\\r\\nconst weapons = [];\\r\\nconst enemies = [];\\r\\n\\r\\nfunction spawnEnemy() {\\r\\n    const x = screenWidth;\\r\\n    const y = Math.random() * (screenHeight - 50);\\r\\n    enemies.push(new Enemy(x, y));\\r\\n}\\r\\n\\r\\nfunction update() {\\r\\n    ctx.clearRect(0, 0, screenWidth, screenHeight);\\r\\n\\r\\n    player.draw();\\r\\n\\r\\n    weapons.forEach((weapon, index) =\u003e {\\r\\n        weapon.update();\\r\\n        weapon.draw();\\r\\n        if (weapon.x \u003e screenWidth) {\\r\\n            weapons.splice(index, 1);\\r\\n        }\\r\\n    });\\r\\n\\r\\n    enemies.forEach((enemy, index) =\u003e {\\r\\n        enemy.update();\\r\\n        enemy.draw();\\r\\n        if (enemy.x + enemy.width \u003c 0) {\\r\\n            enemies.splice(index, 1);\\r\\n        }\\r\\n    });\\r\\n\\r\\n    weapons.forEach((weapon, wIndex) =\u003e {\\r\\n        enemies.forEach((enemy, eIndex) =\u003e {\\r\\n            if (\\r\\n                weapon.x \u003c enemy.x + enemy.width \u0026\u0026\\r\\n                weapon.x + weapon.width \u003e enemy.x \u0026\u0026\\r\\n                weapon.y \u003c enemy.y + enemy.height \u0026\u0026\\r\\n                weapon.y + weapon.height \u003e enemy.y\\r\\n            ) {\\r\\n                weapons.splice(wIndex, 1);\\r\\n                enemies.splice(eIndex, 1);\\r\\n            }\\r\\n        });\\r\\n    });\\r\\n\\r\\n    requestAnimationFrame(update);\\r\\n}\\r\\n\\r\\ndocument.addEventListener('keydown', (event) =\u003e {\\r\\n    if (event.key === 'ArrowLeft') player.move('left');\\r\\n    if (event.key === 'ArrowRight') player.move('right');\\r\\n    if (event.key === 'ArrowUp') player.move('up');\\r\\n    if (event.key === 'ArrowDown') player.move('down');\\r\\n    if (event.key === ' ') {\\r\\n        weapons.push(new Weapon(player.x + player.width / 2, player.y + player.height / 2));\\r\\n    }\\r\\n});\\r\\n\\r\\nsetInterval(spawnEnemy, 1000);\\r\\nupdate();\\r\\n\"}","created_at":"2024-07-06T20:31:15.045+08:00","updated_at":"2024-07-06T20:31:37.627+08:00","name":"戰鬥遊戲","language":"web","screenshot":{"url":"https://cdn3.koding.school/uploads/project/screenshot/786172/c5cc59fd38effd194d7b7821da26b9e9.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":2,"hashid":"882sjy8kg","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}