HTML游戏网球

最新推荐文章于 2021-05-30 19:47:44 发布

马克图布No1

最新推荐文章于 2021-05-30 19:47:44 发布

阅读量330

点赞数

分类专栏： HTML 文章标签： html 游戏

本文链接：https://blog.csdn.net/weixin_40271376/article/details/103647437

版权

这是一篇介绍HTML网球游戏的博客，内容来源于github上的作者Steven Lambert。文章详细讲解了如何使用HTML来实现一个简单有趣的网球游戏。

摘要由CSDN通过智能技术生成

HTML游戏网球，代码来自github作者Steven Lambert

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
  html, body {
   
    height: 100%;
    margin: 0;
  }

  body {
   
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  </style>
</head>
<body>
<canvas width="750" height="585" id="game"></canvas>
<script>
const canvas = document.getElementById('game');
const context = canvas.getContext('2d');
const grid = 15;
const paddleHeight = grid * 5; // 80
const maxPaddleY = canvas.height - grid - paddleHeight;

var paddleSpeed = 6;
var ballSpeed = 5;

const leftPaddle = {
   
  // start in the middle of the game on the left side
  x: grid * 2,
  y: canvas.height / 2 - paddleHeight / 2,
  width: grid,
  height: paddleHeight,

  // paddle velocity
  dy: 0
};
const rightPaddle = {
   
  // start in the middle of the game on the right side
  x: canvas.width - grid * 3