canvas猜数游戏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>猜数</title>
</head>
<body> <canvas id="box" width="500" height="300"></canvas>
<form>
<input type="text" id="guessValue" placeholder="port Canvas Image">
<button id="createImageData">猜猜看?!</button>
</form>
<script>
var guesses = 0;
var message = "Guess the letter from a(lower) to Z(higher)";
var letters = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
var today = new Date();
var letterToGuess = '';
var higherOrLower='';
var letterGuessed;
var gameOver = false; function initGame() {
var letterIndex = Math.floor(Math.random() * letters.length);
letterToGuess = letters[letterIndex];
guess = 0;
letterGuessed = [];
gameOver = false;
window.addEventListener("keydown", eventKeyPressed, true);
drawScreen();
var formElement = document.querySelector("#createImageData");
formElement.addEventListener("click",createImageDataPressed,false);
} function eventKeyPressed(e){
if(!gameOver) {
var letterPressed = String.fromCharCode(e.keyCode);
letterPressed = letterPressed.toLowerCase();
guesses++;
letterGuessed.push(letterPressed);
if (letterPressed == letterToGuess) {
gameOver = true;
} else {
letterIndex = letters.indexOf(letterToGuess);
guessIndex = letters.indexOf(letterPressed);
console.log(guessIndex);
if (guessIndex < 0) {
higherOrLower = "That is not a letter!"
} else if (guessIndex > letterIndex) {
higherOrLower = "Lower";
} else {
higherOrLower = "higher";
}
}
drawScreen();
}
}
var canvas = document.querySelector("#box");
var ctx = canvas.getContext("2d");
function drawScreen(){
//背景
ctx.fillStyle = "#ffffaa";
ctx.fillRect(0,0,500,300);
//边框
ctx.strokeStyle = "#000000";
ctx.strokeRect(5,5,490,290);
ctx.textBaseline = "top";
//日期
ctx.fillStyle = "#000000";
ctx.font = "10px Sans-Serif";
ctx.fillText(today,150,10);
//消息
ctx.fillStyle = "#ff0000";
ctx.font = "14px Sans-serif";
ctx.fillText(message,125,30); //猜的次数
ctx.fillStyle = "#109910";
ctx.font = "16px Sans-serif";
ctx.fillText("guess: "+guesses+"次!",215,50);
//显示higher或lower
ctx.fillStyle = "#000";
ctx.font = "16px Sans-Serif";
ctx.fillText("Higher or Lower: "+higherOrLower,150,125);
//猜过的字母
ctx.fillStyle = "#ff0000";
ctx.font = "16px Sans-Serif";
ctx.fillText("Letters Guessed: "+letterGuessed.toString(),10,260);
if(gameOver){
ctx.fillStyle = "#ff0000";
ctx.font = "40px _sans-serif";
ctx.fillText("You got it!",150,180);
}
}
function createImageDataPressed(e){
window.open(canvas.toDataURL(),"canvasImage","left=0,top=0,width="+canvas.width +",height="+canvas.height +",toolbar=0,resizeable=0");
}
initGame();
</script>
</body>
</html>
canvas猜数游戏的更多相关文章
- 【BZOJ 1594】 [Usaco2008 Jan]猜数游戏 (二分+并查集)
1594: [Usaco2008 Jan]猜数游戏 Description 为了提高自己低得可怜的智商,奶牛们设计了一个新的猜数游戏,来锻炼她们的逻辑推理能力. 游戏开始前,一头指定的奶牛会在牛棚后面 ...
- usaco 猜数游戏
Description 为了提高智商,锻炼思维能力,奶牛设计了一个猜数游戏.游戏开始前,贝西会在牛棚后面摆上N个数字.所有数字排成一条直线,按次序从1到N编号.每个数字在1到10^9之间,没有两个数字 ...
- (一)Python之猜数游戏
猜数游戏由简如深的编码学习过程: 3次机会: print('------------------我爱鱼C工作室------------------')count=0while count < 3 ...
- 猜数游戏-flag的运用
package my;import java.util.Scanner;public class MyJava { public static void main(String[] ar ...
- Java课程设计——猜数游戏(201521123111 陈伟泽)
Java课程设计--猜数游戏(201521123111 陈伟泽) 1.团队课程设计博客链接 博客作业--猜数游戏 2.个人负责模块或任务说明 Answer:一些基础界面的构造,排行榜的构造,用文件录入 ...
- JAVA课程设计 猜数游戏 团队
团队名称,成员介绍 名称: 猜数游戏 成员: 网络1514 201521123086 周颖强 网络1514 201521123087蒋勃超 项目git地址 git.oschina.net/jbc113 ...
- BZOJ 2222: [Cqoi2006]猜数游戏【神奇的做法,傻逼题,猜结论】
2222: [Cqoi2006]猜数游戏 Time Limit: 20 Sec Memory Limit: 259 MBSubmit: 604 Solved: 260[Submit][Status ...
- 从scratch到python——猜数游戏
` 之前讲解了从scratch到python,基于python turtle库的实现,讲解了用scratch和python turtle绘图的实现,以及让小猫动起来和当角色被单击的例子. 本节课讲继续 ...
- VBS猜数游戏
VBS 猜数游戏 2018-11-09 21:19:11 by xutao msgbox "The Swami" ,,"Game" msgbox " ...
随机推荐
- REQUEST的TRACE文件
--REQUEST的TRACE文件 SELECT 'Trace Name: ' || DEST.VALUE || '/' || LOWER (DBNM.VAL ...
- Tempdb--Allocation Bottleneck
Alloctaion bottleneck refers to contention in the system pages that store allocation structures. PFS ...
- Visual Studio Code Angular4 配置环境
首先在本机安装node.js才能用 npm 命令 环境搭建 安装node.jsnpm install -g @angular/cli 安装第三方库npm install --save bootstra ...
- unity 加载资源
Unity3D中的资源的处理种类 Unity中的资源资源的处理种类大致分为:Resources.StreamingAssets.AssetBundle Resources 是作为一个Unity的保留文 ...
- leetcode 实现strStr()
实现strStr()函数. 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始).如果不存在,则返回 ...
- python网络编程--TCP连接的三次握手(三报文握手)与四次挥手
一.TCP连接 运输连接有三个阶段: 连接建立.数据传送和连接释放. 在TCP连接建立过程中要解决以下三个问题: 1,要使每一方能够确知对方的存在. 2.要允许双方协商一些参数(如最大窗口之,是否使用 ...
- 如何在linux设置回收站 - 防止失误操作造成数据清空
linux rm命令是即刻删除的,而且挺多人喜欢加上-f强制命令,更暴力的是删除文件夹直接 rm -rf ,这样子代表你执行完后,就完全被干掉了. 还是推荐在linux下设置回收站,写一个shell脚 ...
- java学习笔记—HttpServletResponse(21)
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, ...
- 【OCP-12c】CUUG最新考试原题整理及答案(071-12)
12.(5-12)choose two:Examine the data in the CUSTOMERS table:You want to list all cities that have mo ...
- 代码审计之Catfish CMS v4.5.7后台作者权限越权两枚+存储型XSS一枚
首先本地搭建环境,我所使用的是Windows PHPstudy集成环境.使用起来非常方便.特别是审计的时候.可以任意切换PHP版本. 本文作者:226safe Team – Poacher 0×01 ...