Speechmatics - API for Voice AI Agents
Mini tools
-
Here is a simple HTML game code that meets your requirements. You can copy and paste it into a file and open it in your web browser to play. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>2D Player Game</title> <style> body { margin: 0; overflow: hidden; } canvas { background: #87CEEB; display: block; margin: 0 auto; } .cube { position: absolute; width: 50px; height: 50px; background-color: red; } </style> </head> <body> <canvas id="gameCanvas" width="800" height="400"></canvas> <div id="cube" class="cube"></div> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); let player = { x: 50, y: 300, width: 50, height: 50, speed: 5, dy: 0, jumpPower: 10, gravity: 0.5, isJumping: false }; const cube = document.getElementById('cube'); cube.style.left = '400px'; cube.style.top = '300px'; function update() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawPlayer(); drawCube(); handleMovement(); if (player.isJumping) { player.dy += player.gravity; player.y += player.dy; if (player.y + player.height >= canvas.height) { player.y = canvas.height - player.height; player.isJumping = false; player.dy = 0; } } requestAnimationFrame(update); } function drawPlayer() { ctx.fillStyle = 'blue'; ctx.fillRect(player.x, player.y, player.width, player.height); } function drawCube() { const cubeX = parseInt(cube.style.left); const cubeY = parseInt(cube.style.top); ctx.fillStyle = 'red'; ctx.fillRect(cubeX, cubeY, 50, 50); } function handleMovement() { if (keys[87] && !player.isJumping) { // W key player.dy = -player.jumpPower; player.isJumping = true; } if (keys[68]) { // D key player.x += player.speed; } if (keys[65]) { // A key player.x -= player.speed; } const cubeX = parseInt(cube.style.left); const cubeY = parseInt(cube.style.top); if (player.x < cubeX + 50 && player.x + player.width > cubeX && player.y < cubeY + 50 && player.y + player.height > cubeY) { // Collision detected cube.style.left = `${cubeX + 1}px`; } // Boundary checks if (player.x < 0) player.x = 0; if (player.x + player.width > canvas.width) player.x = canvas.width - player.width; } const keys = {}; window.addEventListener('keydown', (e) => { keys[e.keyCode] = true; }); window.addEventListener('keyup', (e) => { keys[e.keyCode] = false; }); update(); </script> </body> </html> ``` ## Details: - **Movement**: The player moves left and right using the "A" and "D" keys, respectively. Jumping is done using the "W" key. - **Physics**: The player can jump and will fall back down due to gravity. - **Interactions**: There is a red cube that the player can bump into. Colliding with it will cause the cube to slightly move. Feel free to modify the code as you wish!
-
-
-
#
Tool
Task
Released
Price
Country
Views
Features
Saves
Reviews
Comments
