HTML+CSS+JS实现的贪吃球小游戏【转】
转载地址：【https://blog.csdn.net/qq_43115104/article/details/84228987】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃球大作战</title>
<style>
#d01{
width: 606px;
margin: 20px auto;
}
#c01{
border-top: 3px solid #80ffff;
border-right: 3px solid #00ff00;
border-bottom: 3px solid #ff0000;
border-left: 3px solid #ff8080;
background-color: black;
}
#d02{
width: 606px;
margin-top: 5px;
margin-bottom: 5px;
text-align: center;
font-size:12px;
font-style: italic;
}
#i01{
display: block;
margin-left: 200px;
float: left;
}
#i02{
display: block;
margin-right: 200px;
float: right;
}
</style>
</head>
<body onkeydown="doKeyDown(event)">
<div id="d01">
<canvas id="c01" width="600" height="500"></canvas><!--画布-->
<div id="d02"></div><!--提示框-->
<input type="button" value="重新开始" onClick="rest()" id="i01">
<input type="button" value="游戏说明" onClick="explain()" id="i02">
</div>
<script type="text/javascript">
var canvas = document.getElementById("c01");
var context = canvas.getContext("2d");
var tooltip = document.getElementById("d02");
var Serpengo = {//红色贪吃球
"x" : 100,
"y" : 100,
"r" : 8,
"color" : "red"
}
var Circle = {//蓝色小球
"x" : 50,
"y" : 50,
"r" : 4,
"color" : "blue"
}
var Rect = {//绿色方块
"x" : 200,
"y" : 200,
"width" : 8,
"height" : 8,
"color" : "green"
}
function rest() {//重置
Serpengo.r = 8;
draw();
drawFood();
}
function draw() {
var width = 600;
var height = 500;
//清空画布
context.clearRect(0, 0, width, height);
//绘制贪吃球
context.fillStyle = Serpengo.color;
context.beginPath();
context.arc(Serpengo.x, Serpengo.y, Serpengo.r, 0, Math.PI * 2, true);
context.fill();
}
window.addEventListener("load", draw, true);
function doKeyDown(event) {
var flag=false;//接触旗帜
switch (event.keyCode) {
case 38://上键头
if(Serpengo.y<=0) {//边界判断
break;
}
Serpengo.y -= 4;
draw();
break;
case 40://下键头
if(Serpengo.y>=500) {//边界判断
break;
}
Serpengo.y += 4;
draw();
break;
case 37://左键头
if(Serpengo.x<=0) {//边界判断
break;
}
Serpengo.x -= 4;
draw();
break;
case 39://右箭头
if(Serpengo.x>=600) {//边界判断
break;
}
Serpengo.x += 4;
draw();
break;
}
if ((Serpengo.x - Circle.x) * (Serpengo.x - Circle.x)
+ (Serpengo.y - Circle.y) * (Serpengo.y - Circle.y) <= (Serpengo.r + Circle.r)
* (Serpengo.r + Circle.r)) {//判断红色贪吃球与蓝色小球是否接触
circleRandom();
Serpengo.r += 2;
flag=true;
}
if ((Serpengo.x - Rect.x) * (Serpengo.x - Rect.x)
+ (Serpengo.y - Rect.y) * (Serpengo.y - Rect.y) <= (Serpengo.r + 6)
* (Serpengo.r + 6)) {//判断红色贪吃球与绿色方块是否接触
rectRandom();
Serpengo.r += 2;
flag=true;
}
if (Serpengo.r > 200) {//贪吃球上限设置
Serpengo.r = 200;
}
if(flag){//接触到了就重画
draw();
}
drawFood();
}
function drawFood() {
drawCircle();
drawRect();
}
function drawCircle() {
context.fillStyle = Circle.color;
context.beginPath();
context.arc(Circle.x, Circle.y, Circle.r, 0, Math.PI * 2, true);
context.fill();
}
window.addEventListener("load", drawCircle, true);
function circleRandom() {
Circle.x = Math.random();
Circle.x = Math.ceil(Circle.x * 600);
Circle.y = Math.random();
Circle.y = Math.ceil(Circle.y * 500);
}
function drawRect() {
context.fillStyle = Rect.color;
context.beginPath();
context.rect(Rect.x, Rect.y, Rect.width, Rect.height);
context.fill();
}
window.addEventListener("load", drawRect, true);
function rectRandom() {
Rect.x = Math.random();
Rect.x = Math.ceil(Rect.x * 600);
Rect.y = Math.random();
Rect.y = Math.ceil(Rect.y * 500);
}
var showhelp = false;
function explain() {
showhelp = !showhelp;
if (showhelp) {
tooltip.innerHTML = "用键盘的上、下、左、右键移动红色贪吃球，吃掉蓝色小球或者绿色方块，可以让红色贪吃球变大，直到红色贪吃球半径大至所设置的上限。";
} else {
tooltip.innerHTML = "贪吃球大作战";
}
}
</script>
</body>
</html>
HTML+CSS+JS实现的贪吃球小游戏【转】的更多相关文章
- html+css+js实现狼吃羊小游戏
html+css+js实现狼吃羊小游戏 一.总结 一句话总结:给动的元素下标记,这里表现为将要活动的标签动态增加class,这是一种很好的思想. 1.如何实现棋子走动的时候简单精确定位? 用重构坐标系 ...
- 用js写一个贪吃蛇小游戏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS高级---案例：贪吃蛇小游戏
案例:贪吃蛇小游戏 可以玩的小游戏,略复杂,过了2遍,先pass吧 先创建构造函数,再给原型添加方法.分别创建食物,小蛇和游戏对象. 食物,小蛇的横纵坐标,设置最大最小值,运动起来的函数,按上下左右键 ...
- JS练习实例--编写经典小游戏俄罗斯方块
最近在学习JavaScript,想编一些实例练练手,之前编了个贪吃蛇,但是实现时没有注意使用面向对象的思想,实现起来也比较简单所以就不总结了,今天就总结下俄罗斯方块小游戏的思路和实现吧(需要下载代码也 ...
- C++ 简单的控制台贪吃蛇小游戏
由于比较懒,所以不怎么写,觉得这样不应该.我应该对自己学的做出整理,不管是高端低端,写出来是自己的. // 贪吃蛇.cpp : 定义控制台应用程序的入口点. // #include "std ...
- 贪吃蛇小游戏-----C语言实现
1.分析 众所周知,贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本,既简单又耐玩.该游戏通过控制蛇头方向吃食物,从而使得蛇变得越来越长,蛇不能撞墙,也不能装到自己,否则游戏结束.玩过贪吃蛇的 ...
- js实现简单的俄罗斯方块小游戏
js实现简单的俄罗斯方块小游戏 开始 1. 创建一个宽为 200px,高为 360px 的背景容器 <!DOCTYPE html> <html lang="en" ...
- Java GUI学习,贪吃蛇小游戏
JAVA GUI练习 贪吃蛇小游戏 前几天虽然生病了,但还是跟着狂神学习了GUI的方面,跟着练习了贪吃蛇的小项目,这里有狂神写的源码点我下载,还有我跟着敲的点我下载,嘿嘿,也就注释了下重要的地方,这方 ...
- 用GUI实现java版贪吃蛇小游戏
项目结构 新建一个JFrame窗口,作为程序入口 public class GameStart{ public static void main(String[] args) { JFrame jFr ...
- Three.js 实现3D开放世界小游戏：阿狸的多元宇宙 🦊
声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 2545光年之外的开普勒1028星系,有一颗色彩斑斓的宜居星球 ,星际移民 ...
随机推荐
- 实验五：FTP远程密码pojie（有敏感词）
[实验目的] 了解远程FTP密码pojie原理,了解如何有效防范类似攻击的方法和措施,掌握pojieftp帐号口令pojie技术的基本原理.常用方法及相关工具. [知识点] FTP口令pojie [实 ...
- python 判断token是否有效，若失效，重新发起token请求
场景: 1.对一个接口,进行接口自动化测试,查找的是有权限操作的用例,传入到获取token接口,生成token,判断当前是否有token,如果存在token,则无需再次发起token接口: 存在的问题 ...
- Mysql 使用（二）
1 启动: 2 net start mysql 3 4 进入: 5 mysql -uroot -pmysql 6 7 显示数据库: 8 show databases; 9 10 使用数据库: 11 u ...
- 详细讲解 Keil Pack Installer，以及通过 Keil 官网获取 Pack
前言 大家好,我是梁国庆. 收到粉丝留言,说 Keil 安装 Pack 不太明白,可不可以详细演示一下? 当然可以有,直接视频+文章全部安排,我就是宠粉. PS:第一次录视频有些紧张,见谅哈. 微信视 ...
- 3568F-翼辉SylixOS国产操作系统演示案例
- dig 命令详解及使用示例
一.背景知识 CNAME CNAME 是 Canonical Name 的缩写,它是 DNS(域名系统)记录的一种类型.CNAME 记录用于将一个域名映射(别名)到另一个域名.换句话说,当你访问一个设 ...
- P8571 题解
既然字符串的总长一定,不妨对于每个询问中的 \(s_k\) 的长度根号分治,假定分治阈值为 \(B\).下面令 \(L\) 为所有串长度总和. 对于长度大于 \(B\) 的字符串,这样的不同字符串至多 ...
- 基于 Impala 的高性能数仓实践之物化视图服务
本文将主要介绍 NDH Impala 的物化视图实现. 接上篇,前两篇分别讲了执行引擎和虚拟数仓,它们是让一个 SQL 又快又好地执行的关键.但如果某些 SQL 过于复杂,比如多张大表进行 Join ...
- PositiveSmallIntegerField、SmallIntegerField和IntegerField
当您在Django中定义模型时,有几种不同的整数字段类型可供选择,包括PositiveSmallIntegerField.SmallIntegerField和IntegerField.以下是这三种整数 ...
- 基于微信小程序+Springboot线上租房平台设计和实现【三端实现小程序+WEB响应式用户前端+后端管理】
感兴趣的可以先收藏起来,大家在毕设选题,项目以及论文编写等相关问题都可以给我加好友咨询 一. 前言介绍: 近年来,我国的社会经济迅猛发展,社会对于房屋租赁的需求也在不断增多.在房屋租赁企业中面对繁琐而 ...