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星系,有一颗色彩斑斓的宜居星球 ,星际移民 ...
随机推荐
- ThreadLocal本地局部线程demo
ThreadLocal本地局部线程demo import org.slf4j.Logger; import org.slf4j.LoggerFactory; import java.util.Hash ...
- 基于Web3.0的区块链图片上传
开始前,我们先简单了解一下基本的概念,我大致归纳为以下几个点 什么是Web3.0,和区块链又有什么关系?(上回的文章不就派上用场了) 需求:开发一个基于Python的Web 3.0图片上传系统.这个系 ...
- format( )函数
在Python中,DETAIL_URL.format(id=id) 是一个字符串格式化的表达式.它通常用于根据一个已定义的字符串模板 DETAIL_URL 来生成一个新的字符串.在这个模板中,会包含一 ...
- C++类与对象详解
什么是类和对象 类和对象的概念 类是对象的抽象,对象是对客观事物的抽象. 用通俗的话来说: 类是类别的意思,是数据类型. 对象是类别下的具体事物. 也就是说: 类是数据类型,对象是变量. 比如: 水果 ...
- python爬虫-request模块
1. requests 中的请求方法 HTTP 请求方法: requests.get(url, params=None, **kwargs) # GET 请求 requests.post(url, d ...
- mtr和traceroute的区别，以及为什么traceroute不显示路径mtr却可以显示路径
最近工作主要都是网络策略的开通和网络测试,在测试的过程当中发现当网络不通时,用traceroute来看路由路径的时候总是无法显示出来,于是就换了个工具-mtr,发现mtr可以正常显示出路由路径,帮助我 ...
- SQLCel匹配原数据信息，更新原数据所有信息并插入新数据的过程
使用SQLCel高效率(速度快,数据完整)的解决了我领导提的问题 "如何更新数据库中原有的数据并插入新的订单数据" 过程如下: 思路:使用字段匹配和修改字段即可解决问题,用时3分钟 ...
- Unity 中关于SubMesh的拾取问题
问题背景 最近在开发一个功能,钻孔功能,每一层(段)都需要单独拾取,显示不同的颜色,使用不同材质 问题分析 对于这个功能,由于上述需求,很容易想到用submesh实现,但是主要问题是在于对于Subme ...
- Java 表达式执行引擎 jexl
介绍 JEXL的全称是Java表达式语言(Java Expression Language),简单的说,它可以配合我们的Java程序运算一些简单的表达式. 具体可以识别哪些表达式? 包含最基本的加减乘 ...
- 树莓派安装OpenCv
树莓派安装OpenCv 更换树莓派软件源 我们选择将树莓派的软件源切换到清华大学镜像站,据笔者亲测,通过此站可以顺利安装openCV. 切换软件源需要修改两个软件源配置文件的内容. 第一个需要修改是「 ...