<!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猜数游戏的更多相关文章

  1. 【BZOJ 1594】 [Usaco2008 Jan]猜数游戏 (二分+并查集)

    1594: [Usaco2008 Jan]猜数游戏 Description 为了提高自己低得可怜的智商,奶牛们设计了一个新的猜数游戏,来锻炼她们的逻辑推理能力. 游戏开始前,一头指定的奶牛会在牛棚后面 ...

  2. usaco 猜数游戏

    Description 为了提高智商,锻炼思维能力,奶牛设计了一个猜数游戏.游戏开始前,贝西会在牛棚后面摆上N个数字.所有数字排成一条直线,按次序从1到N编号.每个数字在1到10^9之间,没有两个数字 ...

  3. (一)Python之猜数游戏

    猜数游戏由简如深的编码学习过程: 3次机会: print('------------------我爱鱼C工作室------------------')count=0while count < 3 ...

  4. 猜数游戏-flag的运用

    package my;import java.util.Scanner;public class MyJava {        public static void main(String[] ar ...

  5. Java课程设计——猜数游戏(201521123111 陈伟泽)

    Java课程设计--猜数游戏(201521123111 陈伟泽) 1.团队课程设计博客链接 博客作业--猜数游戏 2.个人负责模块或任务说明 Answer:一些基础界面的构造,排行榜的构造,用文件录入 ...

  6. JAVA课程设计 猜数游戏 团队

    团队名称,成员介绍 名称: 猜数游戏 成员: 网络1514 201521123086 周颖强 网络1514 201521123087蒋勃超 项目git地址 git.oschina.net/jbc113 ...

  7. BZOJ 2222: [Cqoi2006]猜数游戏【神奇的做法,傻逼题,猜结论】

    2222: [Cqoi2006]猜数游戏 Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 604  Solved: 260[Submit][Status ...

  8. 从scratch到python——猜数游戏

    ` 之前讲解了从scratch到python,基于python turtle库的实现,讲解了用scratch和python turtle绘图的实现,以及让小猫动起来和当角色被单击的例子. 本节课讲继续 ...

  9. VBS猜数游戏

    VBS 猜数游戏 2018-11-09  21:19:11 by xutao msgbox "The Swami" ,,"Game" msgbox " ...

随机推荐

  1. 使用MATLAB一键制作mif文件

    本文档主要讲解实现一个16384(2^14)点的14位正弦波数据mif格式文件的生成,使用此文件,我们便可以在FPGA上基于直接数字合成(DDS)原理生成标准的正弦波,即实现信号发生器的功能.关于DD ...

  2. JUnit4简易教程

    1.下载JUnit4的jar包,在项目上右键选properties->Java Build Path ->Libraries->Add library添加刚才的jar包 2.在项目中 ...

  3. RHEL7/CentOS7 Network Service开机无法启动的解决方法

    RHEL7/CentOS7安装完成并配置好所有网络相关配置后重启机器,使用systemctl --failed检查是否有失败的服务,发现在network服务启动失败,使用systemctl statu ...

  4. jenkins启动失败,提示Starting Jenkins Jenkins requires Java8 or later, but you are running 1.7.0

    # 背景 centos安装jenkins后,先启动jenkins服务,结果报错如下: 但自己明明已经安装了java8的 # 解决方法 既然安装了java8的话,那么证明是jenkins启动的是还是用的 ...

  5. Python验证实现登陆功能以及用户锁定(文件存储)

    废话不多说先交代码(只是一个简单的验证):#!/usr/bin/env python #-*- coding:utf8 -*- # Structured program ‘#’是注释 # Functi ...

  6. Lambda 表达式浅谈- 01

    已经有一段时间没有发布博文了... 今天就写一写lambda的一些简单的使用方法 Lambda 在Msdn 上的描述: Lambda 表达式是一种可用于创建委托或表达式目录树类型的匿名函数. 通过使用 ...

  7. 在VC++中执行VBS代码

    此代码来自https://blog.csdn.net/zhu2695/article/details/13770671 作者: zhu2695   时间:2013年10月31日 13:08:41 #i ...

  8. Python----初次见面,请多关照!

    1.计算机的最基本认识 CPU(大脑) 3GHZ + 内存(DDR4) + 主板 + 电源(心脏)+ 显示器 + 键盘 +鼠标+ 显卡 + 硬盘 80MB/s 操作系统分为: windows 家用 l ...

  9. Tomcat绿色版启动"startup.bat"一闪问题的解决方法!

    进入DOS窗口,运行"startup.bat",会出现错误提示,我是win7 64位,提示“JRE_HOME”设置不正确.于是进入环境变量配置,设置“JRE_HOME”项,随后保存 ...

  10. python全栈开发_day31_OSI七层协议和c/s架构

    一:OSI七层协议 应用层 =>表示层 =>会话层 =>传输层 =>网络层 =>数据链路层 =>物理连接层 二:c/s架构 b/s的本质也是c/s 手机端:好像cs ...